window.addEventListener('load', function() {
  let tbody = this.document.querySelector('tbody')
  // 1.实现学员成绩的渲染
  function init() {
    axios({
      url: '/score/list'
    }).then(res => {
      console.log(res)
      let data = res.data.data
      let htmlStr = ''
      for (let key in data) {
        htmlStr += `<tr data-id='${key}'>
                      <th scope="row">${key}</th>
                      <td>${data[key].name}</td>
                      <td class="score" data-batch='1'>${
                        data[key].score[0]
                      }</td>
                      <td class="score" data-batch='2'>${
                        data[key].score[1]
                      }</td>
                      <td class="score" data-batch='3'>${
                        data[key].score[2]
                      }</td>
                      <td class="score" data-batch='4'>${
                        data[key].score[3]
                      }</td>
                      <td class="score" data-batch='5'>${
                        data[key].score[4]
                      }</td>
                    </tr>`
      }
      tbody.innerHTML = htmlStr
    })
  }
  init()

  // 实现成绩的录入和修改
  tbody.addEventListener('click', function(e) {
    if (e.target.className == 'score') {
      // 当前单元格
      let td = e.target
      // 先将值存储
      let score = td.innerText
      // 判断当前单元格是否有输入框了
      if (!td.querySelector('input')) {
        // 清空单元格
        td.innerText = ''
        // 创建一个input输入框
        let input = document.createElement('input')
        // 设置单元格的样式
        input.style.outline = 'none'
        input.style.border = 'none'
        input.style.background = 'transparent'
        input.style.textAlign = 'center'

        // 追加到单元格
        td.appendChild(input)
        // 将td的值填充到input输入框中
        input.value = score
        // // 让输入框的内容选中
        input.select()

        // 为输入框添加失焦事件
        input.addEventListener('blur', function() {
          td.innerText = score
        })

        // 为输入框添加一个按键事件，在按下enter键的时候进行录入或修改操作
        input.addEventListener('keyup', function(e) {
          // e.target是输入框
          if (e.key == 'Enter') {
            axios({
              url: '/score/entry',
              method: 'post',
              data: {
                stu_id: td.parentNode.dataset.id, // 当前成绩所属学员的id
                batch: td.dataset.batch, // 第几次
                score: input.value // 成绩，来自于输入框
              }
            }).then(res => {
              toastr.success('成绩录入功修改成功')
              // 先清空td的html结构
              td.innerHTML = ''
              // 再为td设置文本内容
              td.innerText = input.value
              // 将input移除
              input.remove()
            })
          }
        })
      }
    }
  })
})
